<template>
  <div class="t_box">
    <div class="search">
      <el-form ref="form" label-width="80px">
        <el-form-item label="文章类型">
          <el-input v-model="articleType"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="searchBtn">
      <el-button type="primary">
        <i class="el-icon-search"></i>查询</el-button>
    </div>
    <div class="addBtn">
      <el-button type="primary" @click="toCreate">
        <i class="el-icon-plus"></i>新增</el-button>
    </div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>类型名称</th>
          <th>创建日期</th>
          <th style="width: 120px;">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in typeList" :key="index" v-if="index >= (currentPage - 1)*pageSize && index < currentPage*pageSize">
          <td>{{index+1}}</td>
          <td>{{item.typeName}}</td>
          <td>{{item.createDate}}</td>
          <td style="width: 120px;">
            <el-dropdown>
              <el-button type="primary">
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="delete" @click.native="handleDelete(item.typeId)">
                  <i class="el-icon-delete"></i>删除</el-dropdown-item>
                <el-dropdown-item command="info" @click.native="updateType(item.typeId)">
                  <i class="el-icon-info"></i>修改</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout=" prev, pager, next, sizes, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: 'articleType',
  data() {
    return {
      typeList: [],
      articleType: "",
      currentPage: 1, //默认第一页
      total: 0, //总条数
      pageSize: 10 //默认第一页展示10条
    }
  },
  mounted() {
    // 加载列表
    this.getArticleTypeList();
  },
  methods: {
    getArticleTypeList() {
      request({
        url: "/api/article/getArticleTypeList",
        method: "post",
        data: {}
      }).then(res => {
        console.log(res);
        if (res.msg === "查询成功") {
          this.typeList = res.list;
          this.total = this.typeList.length;
        }
      });
    },
    handleDelete(id) {

    },
    updateType(id) {

    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    toCreate() {
      this.$router.push("createArticleType");
    },
  }
}
</script>
<style lang="scss">
.t_box {
  width: 90%;
  height: 100%;
  margin: auto;
  .search {
    width: 30%;
    float: left;
  }
  .searchBtn {
    width: 60%;
    float: left;
  }
  .addBtn {
    width: 10%;
    float: left;
  }
  table {
    width: 100%;
    // border: 1px solid #fff;
    thead {
      width: 100%;
      background: rgb(68, 114, 196);
      tr {
        height: 50px;
        line-height: 50px;
        th {
          font-size: 15px;
          color: #fff;
        }
      }
    }
    tbody {
      width: 100%;
      background: #fff;
      tr {
        height: 50px;
        line-height: 50px;
        td {
          text-align: center;
          font-size: 14px;
          color: black;
        }
      }
    }
  }
  .page {
    width: 30%;
    margin: auto;
    margin-top: 50px;
  }
}

</style>
